<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>交易记录</title>
		<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../css/mui.min.css">
		<script type="text/javascript" src="../js/zepto.js"></script>
        <script src= "../js/jquery.min.js"></script>
	    <script src="../js/touch.min.js"></script>
		<style type="text/css">
			*{
				margin: 0rem;
				padding: 0rem;
				text-decoration: none;
				list-style: none;
				
			}
			html,body{
				background-color: #fff;
				width: 100%;
				height: 100%;
				 /*font-size:  100rem;*/
				 font-size: calc(100vw / 7.5);
				 font-family: "microsoft yahei";
			}
			.wrapper .header{
			position: fixed;
			top:0rem;
			left: 0rem;
			box-sizing: border-box;
			padding: 0rem 0.1rem;
			display: flex;
			width: 100% ;
			height: 0.88rem;
			background: #809fba;
		}	
			#wrapper{
				height: 0.88rem;
			}
			.content{
				box-sizing: border-box;
				padding: 0rem 0.32rem;
			}
			.content .wrapper-title{
				display: flex;
				justify-content: space-between;
				width: 100%;
				height: 0.91rem;
                font-size: 0.27rem;
                border-bottom: 0.01rem solid #e0f0f0;
			}
			.content .wrapper-title li{
				width: 1.09rem;
				height: 0.91rem;
				line-height: 0.91rem;
				text-align: center;
				color: #7393b0;
			}
			.content .wrapper-title .active{
				font-size: 0.31rem;
				color: #111111;
				font-weight: bold;
				border-bottom: 1px solid #000;
			}
			
			.content .wrapper-main {
				width: 100%;
			}
			.content .wrapper-main .item{
				display: flex;
				width: 100%;
				margin-top: 0.25rem;
				border-bottom: 1px solid #e6eafa;
			}
			.content .wrapper-main .item .left{
				flex: 1;
				text-align: left;
			}
			.content .wrapper-main .item .right{
				flex: 1;
				text-align: right;
			}
			.content .wrapper-main .item .left li{
				height: 0.47rem;
				line-height: 0.47rem;
				font-size: 0.23rem;
				color: #9a9a9a;
			}
			.content .wrapper-main .item .left li:nth-of-type(1){
				height: 0.8rem;
				line-height: 0.8rem;
				font-size: 0.28rem;
				color: #111;
			}
			.content .wrapper-main .item .right li{
				height: 0.5rem;
				font-size: 0.23rem;
				color: #9a9a9a;
			}
			.content .wrapper-main .item .right li:nth-of-type(1){
                height: 0.8rem;
				line-height: 0.8rem;
                font-size: 0.28rem;
				color: #7393b0;
                
			}
			
			.maichu , .qita{
				display: none;
			}
			
			</style>
		
	</head>

	<body>
		<script>
			$(function(){
				$("#wrapper").load("../header.html")
				
			})
			setTimeout(function(){
				$("#wrapper").find(".con").html("交易记录");
				$(".arrow").on("tap",function(){
				window.location.href = "./index.html";
				})
			},200)
			setTimeout(function(){
				$("#wrapper").find(".con").html("交易记录");
				$(".arrow").on("tap",function(){
				window.location.href = "./index.html";
				})
			},2000)
		</script>
		<div class="wrapper" id="wrapper"></div>

		<!--内容-->
		<div class="content">
			<ul class = "wrapper-title">
				<li class= "active" id="mairu" >全部</li>
				<li id="maichu" type="1">充值</li>
                <li id="qita" type="2">交易</li>
                <li id="qita" type="4">提现</li>
			</ul>
			
			<div class="wrapper-main mairu">
				<!-- <div class="item">
					<ul class="left">
						<li>
							<span>交易</span>
							
						</li>
						<li>
							<span>金额：</span>
							<span class="info">2653</span>
						</li>
					</ul>
					<ul class="right">
						<li>
							<span>购买矿机</span>
				
						</li>
						<li>
							<span class="info">2018-5-21 15:30</span>
						</li>
					</ul>
				</div> -->
				
			</div>
			<!-- <div class="wrapper-main maichu">
				<div class="item">
					<ul class="left">
						<li>
							<span>订单号：</span>
							<span class="info">2366</span>
						</li>
						<li>
							<span>买家ID：</span>
							<span class="info">2653</span>
						</li>
						<li>
							<span>卖家ID：</span>
							<span class="info">265623</span>
						</li>
					</ul>
					<ul class="right">
						<li>
							<span>交易金额：</span>
							<span class="info">30</span>
						</li>
						<li>
							<span>交易数量：</span>
							<span class="info">30</span>
						</li>
						<li>
							<span class="info">2018-5-21 15:30</span>
						</li>
					</ul>
				</div>
				<div class="item">
					<ul class="left">
						<li>
							<span>订单号：</span>
							<span class="info">2366</span>
						</li>
						<li>
							<span>买家ID：</span>
							<span class="info">2653</span>
						</li>
						<li>
							<span>卖家ID：</span>
							<span class="info">265623</span>
						</li>
					</ul>
					<ul class="right">
						<li>
							<span>交易金额：</span>
							<span class="info">30</span>
						</li>
						<li>
							<span>交易数量：</span>
							<span class="info">30</span>
						</li>
						<li>
							<span class="info">2018-5-21 15:30</span>
						</li>
					</ul>
				</div>
				<div class="item">
					<ul class="left">
						<li>
							<span>订单号：</span>
							<span class="info">2366</span>
						</li>
						<li>
							<span>买家ID：</span>
							<span class="info">2653</span>
						</li>
						<li>
							<span>卖家ID：</span>
							<span class="info">265623</span>
						</li>
					</ul>
					<ul class="right">
						<li>
							<span>交易金额：</span>
							<span class="info">30</span>
						</li>
						<li>
							<span>交易数量：</span>
							<span class="info">30</span>
						</li>
						<li>
							<span class="info">2018-5-21 15:30</span>
						</li>
					</ul>
				</div>
			</div>
			<div class="wrapper-main qita">
				<div class="item">
					<ul class="left">
						<li>
							<span>订单号：</span>
							<span class="info">2366</span>
						</li>
						<li>
							<span>买家ID：</span>
							<span class="info">2653</span>
						</li>
						<li>
							<span>卖家ID：</span>
							<span class="info">265623</span>
						</li>
					</ul>
					<ul class="right">
						<li>
							<span>交易金额：</span>
							<span class="info">30</span>
						</li>
						<li>
							<span>交易数量：</span>
							<span class="info">30</span>
						</li>
						<li>
							<span class="info">2018-5-21 15:30</span>
						</li>
					</ul>
				</div>
				<div class="item">
					<ul class="left">
						<li>
							<span>订单号：</span>
							<span class="info">2366</span>
						</li>
						<li>
							<span>买家ID：</span>
							<span class="info">2653</span>
						</li>
						<li>
							<span>卖家ID：</span>
							<span class="info">265623</span>
						</li>
					</ul>
					<ul class="right">
						<li>
							<span>交易金额：</span>
							<span class="info">30</span>
						</li>
						<li>
							<span>交易数量：</span>
							<span class="info">30</span>
						</li>
						<li>
							<span class="info">2018-5-21 15:30</span>
						</li>
					</ul>
				</div>
				<div class="item">
					<ul class="left">
						<li>
							<span>订单号：</span>
							<span class="info">2366</span>
						</li>
						<li>
							<span>买家ID：</span>
							<span class="info">2653</span>
						</li>
						<li>
							<span>卖家ID：</span>
							<span class="info">265623</span>
						</li>
					</ul>
					<ul class="right">
						<li>
							<span>交易金额：</span>
							<span class="info">30</span>
						</li>
						<li>
							<span>交易数量：</span>
							<span class="info">30</span>
						</li>
						<li>
							<span class="info">2018-5-21 15:30</span>
						</li>
					</ul>
				</div>
			</div> -->
		</div> 
	</body>
	<script>
		var type1 ;
		$(".wrapper-title").on("tap","li",function(){
			$(".wrapper-title").find(".active").removeClass("active");
			$(this).addClass("active");
			type1 = $(this).attr("type");
			changeContent();
		})
		changeContent();
		function changeContent(){
			console.log(type1)
			$(".wrapper-main").html("")
			$.ajax({
				type: "GET",
				url: `${localStorage.top}api/record/cash_record_list?TOKEN=${localStorage.token}&type=${type1}`,
				success: successed,
				data:{type:type1}
			})
		}
		function successed (data){
			console.log(data);
			var str = "";
			var data = data.data;
			for (var i = 0; i<data.length; i++){
				str+=`<div class="item">
					<ul class="left">
						<li>
							<span>${data[i].type_text}</span>
							
						</li>
						<li>
							<span>金额：</span>
							<span class="info">${data[i].value}</span>
						</li>
						<li id="status">${data[i].status}</li>
					</ul>
					<ul class="right">
						<li>
							<span>${data[i].pay_manner}</span>
				
						</li>
						<li>
							<span class="info">${data[i].time_text}</span>
						</li>
					</ul>
				</div>`
			};

			$(".wrapper-main").html(str)
		}


	</script>
</html>